<template>
	<div id="header">
		<div>
			<img class="logo-img" src="img/logo.png" alt="" />
			<h2 class="logo-name">光谷智慧交通系统</h2>
		</div>

		<!-- 普通用户独有的组件 -->
		<div class="container" v-if="usertype">
			<report></report>
			<note></note>
		</div>
		<!-- 交管部门独有的组件 -->
		<div class="container" v-else>
			<vvideo></vvideo>
			<add-event></add-event>
			<query-event></query-event>
			<update-event></update-event>
			<post-note></post-note>
			<rode-info></rode-info>
		</div>
		<!-- 共有的组件 -->
		<right-now></right-now>
		<tools></tools>
		<search></search>
		<logout></logout>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import Report from '../CommonUser/Report.vue';
import Note from '../CommonUser/Note.vue';
import Vvideo from '../TransportUser/Video.vue';
import AddEvent from '../TransportUser/AddEvent.vue';
import QueryEvent from '../TransportUser/QueryEvent/QueryEvent.vue';
import UpdateEvent from '../TransportUser/UpdateEvent.vue';
import PostNote from '../TransportUser/PostNote.vue';
import RodeInfo from '../TransportUser/RodeInfo.vue';
import RightNow from '../Shared/RightNow.vue';
import Tools from '../Shared/Tools.vue';
import Search from '../Shared/Search.vue';
import Logout from '../Shared/Logout.vue';

export default {
	name: 'Hheader',
	components: {
		Report,
		Note,
		Vvideo,
		AddEvent,
		QueryEvent,
		UpdateEvent,
		PostNote,
		RodeInfo,
		RightNow,
		Tools,
		Search,
		Logout,
	},
	computed: mapState(['usertype']),
	mounted() {
		this.$http.post('/validate').then((res) => {
			const { code } = res;
			if (code == 0 && res.result.online == 1) {
				this.$store.commit('defUserId', res.result.userid);
				this.$store.commit('defUserName', res.result.username);
				if (res.result.usertype == 'user') {
					this.$store.commit('defUserType', true);
				} else {
					this.$store.commit('defUserType', false);
				}
				this.$message({
					duration: 500,
					message: `欢迎您！${res.result.username}`,
					type: 'success',
				});
			} else if (code == 0 && res.result.online == 0) {
				localStorage.setItem('token', '');
				this.$router.go(0);
			}
		});
	},
};
</script>

<style>
#header {
	position: absolute;
	z-index: 10;
	height: 70px;
	width: 100%;
	right: 0;
	background-color: rgba(8, 56, 70, 0.5);
	display: flex;
	border-radius: 15px;
	align-items: center;
}
.logo-name {
	position: relative;
	display: inline-block;
	margin-left: 35px;
	width: 200px;
	min-width: 200px;
	height: 70px;
	text-align: center;
	line-height: 70px;
	color: white;
}
.logo-img {
	display: inline-block;
	position: absolute;
	top: 20px;
	left: 8px;
}

#header #container {
	height: 100%;
	width: 8%;
	min-width: 120px;
	background-color: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
}
#header #btn {
	z-index: 11;
	border-radius: 10px;
	border: none;
	border-bottom: 2px solid white;
	height: 26px;
	width: 100px;
	font-size: 18px;
	color: rgb(109, 111, 106);
	background-color: rgba(248, 248, 132, 0.7);
}
#header #btn:hover {
	cursor: pointer;
	border: none;
	font-weight: 900;
	background-color: antiquewhite;
	color: darkcyan;
	box-shadow: 1px 1px 0px 0px;
	transition: all 0.2s ease-in-out;
	text-decoration: underline;
}
.container {
	display: flex;
	position: relative;
}
</style>
